<template>
	<view class="contain">
		<view class="keys flex flex-row">
			<view>
				<text class="mid mr-2" :class="curindex===-1?'selected':''" @click="selectthis(-1,null)">全部 </text>
				<text v-for="(item,index) in keys.data" class="mid mr-2" :class="curindex===index?'selected':''"  @click="selectthis(index,item)">{{item}}</text>
			</view>
			
		</view>
		<view class="photos flex justify-start flex-wrap">
			<view class="datas flex flex-col justify-center items-center" v-for="(item,index) in photosList.data" @click="goItem(index)">
				<view><image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/folder.png" mode="aspectFit"></image></view>
				<view class="small">{{ lenStr(item.coursename) }}</view>				
			</view>
		</view>
	</view>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import {  onLoad } from '@dcloudio/uni-app'

onLoad(()=>{
	getFengCai();
});

let photosList=reactive<any>({data:[]});
let backupList=reactive<any>({data:[]});


const keys=reactive<any>({data:[]});
let curindex=ref(-1);

const selectthis=(index:number,classname:string | null)=>{
	if(index===-1){
		console.log("选择全部")
		curindex.value=-1;
		photosList.data=backupList.data; //还原一下数据
		return;
	}
	console.log(classname)
	curindex.value=index;
	photosList.data=backupList.data; //还原一下数据
	photosList.data=photosList.data.filter(item=>item.classname===classname);
}

const lenStr=(inputstring:string)=>{
	if(inputstring.length>4) return inputstring.substring(0,4)+"..";
	return inputstring;
}


const getFengCai=()=>{
	let paraData={};
	uni.$tools.Reqeust('/api/getFengCai',paraData,'GET').then((res:any)=>{
		console.log('获取课堂风采数据:==>',res);
		if (res.data.code == 200) {
			photosList.data=res.data.rows;
			backupList.data=res.data.rows;
			res.data.rows.forEach(item=>{
				try{
					console.log(item.classname)
					let index=keys.data.findIndex(obj=>obj===item.classname);
					console.log("index是否有值",index);
					if(index===-1){
						keys.data.push(item.classname);
					}					
				}catch(e){
					console.log("发生错误:",e);
				}
			});
			console.log("keys值",keys.data);
		}
	})
}

const goItem=(index:number)=>{
	let dataPhotos=photosList.data[index];
	console.log("选择数据:",dataPhotos);
	uni.setStorageSync("dataPhotos",dataPhotos);
	uni.$tools.GoUrl("./lookdetail/lookdetail");
}


</script>

<style lang='scss' scoped>
	@import "fengcai.scss";
</style>